<link rel="stylesheet" href="files/css/libs/foundation/foundation.min.css">
<link rel="stylesheet" href="files/css/libs/foundation/app.css">

<script src="files/js/libs/foundation/modernizr.foundation.js" ></script>
<!--<script src="files/js/libs/foundation/jquery.js" ></script>-->

<script type="text/javascript">

$(function () {
	$(document).ready(function(){
		
		
		 myformatter = function(obj){   			
   			return "El año <b>"+obj.series.name+"</b><br/>del mes"+obj.x+" tiene "+obj.y+" soles";
   		}
   		   	
		
		$("a.viewreporte").bind("click",function(e){
			
			e.preventDefault();
			var añoI=$(".añoi").val();
			var añoF=$(".añof").val();
			if(añoF>=añoI)
			{
				getData({ url:"admin/reports/consulta4", data:{ ajax:"ajax",añoI:añoI,añoF:añoF } },
				function(response){
					var	data = response.data; 
					//$("#container").data("serie",data);
					//setTimeout(800);
					  
					loadChart($("#container"), data);
			    
         			});		
					$("div.reporte").css("display","block");
			}
			else
			{
				alert("intervalo de años incorrectos");
				
			}
			
			
		});
		
		
	});
	
});
</script>

<script src="files/js/highcharts.js"></script>
<script src="files/js/modules/exporting.js"></script>
<script src="files/js/loadChart.js" ></script>


<div class="row">
	<div class="twelve columns">
			<div class="two columns">
				<h5>Año Inicial</h5>
			</div>
			<div class="three columns">
				<select class="añoi" style="margin-top:10px ">
					<option value="2004">2004</option>
					<option value="2005">2005</option>
					<option value="2006">2006</option>
					<option value="2007">2007</option>
					<option value="2008">2008</option>					
				</select>				
			</div>
			<div class="two columns">
				<h5>Año Final</h5>
			</div>
			<div class="three columns">
				<select class="añof" style="margin-top:10px ">
			
					<option value="2004">2004</option>
					<option value="2005">2005</option>
					<option value="2006">2006</option>
					<option value="2007">2007</option>
					<option value="2008">2008</option>					
				</select>				
			</div>
		
			<div class="two columns">
				<a href="#" class="viewreporte"> <img  src="files/images/reporte.jpg" width="35px" height="35px" 
					style="margin-bottom: 19px"/> </a> 
			</div>
				
	</div>
</div>

<div class="row" >
	<div class="reporte" style="display:none">
		<div class="twelve columns">
			<div class="row">
				<h4>REPORTE DE VENTAS MENSUALES</h4>	
			</div>
			<div class="row">
				
				<div class="ten columns highchart" id="container" data-title="Reporte de ventas Mensuales" data-formatter="myformatter"
					data-categories="Ene|Feb|Mar|Abr|May|Jun|Jul|Ago|Set|Oct|Nov|Dic" data-subtitle="reporte Mensual" data-titleY="Monto Total(S/.)" data-type="column" >	
							
				</div>		
			</div>
		</div>	
	</div>
</div>
